<template>
	<view class="main animated fadeIn faster">
		<view class="content position-fixed z-index-99 bg-fff" :style="{'paddingTop':$store.state.statusBarHeight+'px','top':'0'}">
			<view class="title" id="title">
				<view class="pl-2 mr-4" @click="goBack"><text class="iconfont icon-31fanhui1 font30 mr-5"></text></view>
				<text :style="{marginRight: IsShow? '0' : '140rpx'}">{{title}}</text>
				<view v-if="IsShow" style="width: 140rpx; color: #727272;">我的嗒币</view>
			</view>
		</view>
		<view :style="{marginTop: DicTop + 15 + 'px'}" v-if="Loading">
			<swiper class="swiper" circular autoplay vertical :interval="3000" :duration="500" disable-touch style="height: 100rpx;">
				<swiper-item class="swiper-item">
					<view class="bg-fff d-flex d-flex-middle d-flex-between rounded15 py-2" style="width: 95%; margin: 0 auto;">
						<image src="https://img1.baidu.com/it/u=1283579534,4152052962&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" class="rounded ml-2" style="width: 60rpx; height: 60rpx;"></image>
						<view class="font22 ml-2" style="flex: 1; display: inline-block; color: #404040;">罗*********花了200元，获得了1242个笔记阅...</view>
						<view class="font22 mr-2" style="display: inline-block; color: #979797;">3分钟前</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="bg-fff d-flex d-flex-middle d-flex-between rounded15 py-2" style="width: 95%; margin: 0 auto;">
							<image src="https://img1.baidu.com/it/u=1729446207,3945274126&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" class="rounded ml-2" style="width: 60rpx; height: 60rpx;"></image>
							<view class="font22 ml-2" style="flex: 1; display: inline-block; color: #404040;">Y*********花了200元，获得了1242个笔记阅...</view>
							<view class="font22 mr-2" style="display: inline-block; color: #979797;">5分钟前</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="bg-fff d-flex d-flex-middle d-flex-between rounded15 py-2" style="width: 95%; margin: 0 auto;">
							<image src="https://img2.baidu.com/it/u=2439814012,2136681640&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" class="rounded ml-2" style="width: 60rpx; height: 60rpx;"></image>
							<view class="font22 ml-2" style="flex: 1; display: inline-block; color: #404040;">P*********花了200元，获得了1242个笔记阅...</view>
							<view class="font22 mr-2" style="display: inline-block; color: #979797;">10分钟前</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="bg-fff rounded15 py-3" style="width: 95%; margin: 30rpx auto 0;">
				<view class="d-flex d-flex-middle d-flex-between mt-1 mb-3">
					<view class="font32 ml-2 font-bold">推广笔记</view>
					<view class="mr-4 d-flex">
						<view class="" style="color: #979797;">更多笔记</view>
						<view class="d-flex-btn">
							<text class="iconfont icon-youjiantou" style="color: #979797;"></text>
						</view>
					</view>
				</view>
				<view class="d-flex d-flex-middle ml-2 mb-3">
					<view>点击查看</view>
					<view style="color: #4691f5;">「加热通关秘籍」</view>
					<view>了解规范</view>
				</view>
				<view class="d-flex">
					<view class="ml-2 mr-3">
						<image :src="userInfo.screenshot1" class="rounded30" mode="aspectFill" style="width: 200rpx; height: 250rpx;"></image>
					</view>
					<view class="">
						<view class="font32 mt-1" style="width: 200px; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;">{{userInfo.remark}}</view>
						<view class="d-flex font26 my-2">
							<view>笔记作者：</view>
							<view>{{userInfo.nickName}}</view>
						</view>
						<view class="d-flex font26">
							<view>发布时间：</view>
							<view>{{userInfo.gmtCreated}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-fff rounded15 py-3" style="width: 95%; margin: 30rpx auto 0;">
				<view class="d-flex d-flex-middle mt-1 mb-3">
					<view class="font32 ml-2 font-bold mr-2">想获得多少次曝光人次</view>
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E9%97%AE%E5%8F%B7.png" style="width: 40rpx; height: 40rpx;"></image>
				</view>
				<view class="mx-2 d-flex d-flex-between pb-3" style="border-bottom: 1px solid #ededed;">
					<view @click="changeExposureDex(0)" :class="['text-center','py-2','rounded15',ExposureDex===0? 'currentExposure' : '']" style="width: 30%; background: #f4f4f4; color: #5d5d5d;">2600+ 次</view>
					<view @click="changeExposureDex(1)" :class="['text-center','py-2','rounded15',ExposureDex===1? 'currentExposure' : '']" style="width: 30%; background: #f4f4f4; color: #5d5d5d;">5000+ 次</view>
					<view @click="changeExposureDex(2)" :class="['text-center','py-2','rounded15',ExposureDex===2? 'currentExposure' : '']" style="width: 30%; background: #f4f4f4; color: #5d5d5d;">7000+ 次</view>
				</view>
				<view class="d-flex d-flex-middle ml-2 mt-3">
					<view style="color: #8d8d8d;">审核通过后，预计</view>
					<view class="mx-2" style="color: #303030;">12小时</view>
					<view style="color: #8d8d8d;">内推广完毕</view>
				</view>
			</view>
			<view class="bg-fff rounded15 py-3" style="width: 95%; margin: 30rpx auto 0;">
				<view class="font32 ml-2 font-bold mt-1 mb-3">支付及优惠</view>
				<view class="d-flex d-flex-middle d-flex-between mt-1 mb-5">
					<view class="ml-2">支付方式</view>
					<view class="mr-4 d-flex" @click="OpenpurchasePopup">
						<view>{{PayMethods}}支付</view>
						<view class="d-flex-btn">
							<text class="iconfont icon-youjiantou" style="color: #979797;"></text>
						</view>
					</view>
				</view>
				<view class="d-flex d-flex-middle d-flex-between mt-1 mb-5">
					<view class="ml-2">推广总金额</view>
					<view class="mr-4">65.00元</view>
				</view>
				<view class="d-flex d-flex-middle d-flex-between mt-1 mb-5">
					<view class="ml-2">新客折扣优惠</view>
					<view class="mr-4">30.00元</view>
				</view>
				<view class="d-flex d-flex-middle d-flex-between mt-1 pb-3 ml-2 mr-4" style="border-bottom: 1px solid #ededed;">
					<view class="d-flex d-flex-middle">
						<view class="mr-1">优惠券</view>
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E9%97%AE%E5%8F%B7.png" style="width: 30rpx; height: 30rpx;"></image>
					</view>
					<view>当前档位享折扣优惠，不可与券叠加</view>
				</view>
				<view class="d-flex d-flex-middle d-flex-between mt-3">
					<view class="ml-2 font32">总计</view>
					<view class="mr-4 d-flex d-flex-middle">
						<view class="font32 font-bold">35.00</view>
						<view style="margin-left: 2px;">元</view>
					</view>
				</view>
				<view class="mr-4 font26" style="color: #8d8d8d; text-align: right;">需用350嗒币抵扣</view>
			</view>
			<view class="d-flex d-flex-center my-6 pb-15 font22">
				<view style="color: #8c8c8c;">点击支付即同意</view>
				<view style="color: #3e8cf5">《小嗒软件服务协议》</view>
				<view style="color: #8c8c8c;">和</view>
				<view style="color: #3e8cf5">《小嗒内容加热协议》</view>
			</view>
		</view>
		<view class="position-fixed left-0 right-0 bottom-0 bg-fff d-flex d-flex-between d-flex-middle" style="border-top: 1px solid #ededed;">
			<view class="ml-4 pb-3">
				<view class="font-bold mt-2 mb-1">实付现金（元）</view>
				<view class="d-flex d-flex-bottom" style="color: #ff1f40;">
					<view class="d-flex d-flex-bottom mr-2">
						<view class="font-bold" style="font-size: 50rpx;">35</view>
						<view style="margin-bottom: 5px;">.00</view>
					</view>
					<view class="font22 px-2" style="border: 1px solid #ffd4da; height: 45rpx; line-height: 45rpx;">已优惠30.00元</view>
				</view>
			</view>
			<view class="colorfff mr-4 font32 px-4 rounded40" style="background: #ff1f40; height: 80rpx; line-height: 80rpx;">立即支付</view>
		</view>
		<uni-popup ref="purchasePopup" @change="PopupStatusChange" background-color="#fff" border-radius="10px 10px 0 0" style="z-index: 999999; position: relative;">
			<radio-group :class="['PayOptions',' d-flex-between','pt-2',index===2? 'pb-3' : '']" v-for="(item, index) in PayList" :key="item.id" @change="ChangePayOpt(index)">
			  <label class="d-flex d-flex-middle d-flex-between">
			    <view class="icon">
			      <image :src="item.icon"></image>
			    </view>
			    <view class="option mr-1" style="margin-bottom: 4rpx;">{{item.name}}</view>
			    <view v-if="item.desc" class="font22 px-3 rounded10" style="color: #FF9645; background: #f9e7c9; margin-bottom: 2px;">{{item.desc}}</view>
			  </label>
			  <radio :value="index" :checked="item.checked" style="transform:scale(0.6);"></radio>
			</radio-group>
		</uni-popup>
	</view>
</template>

<script>
	import TitleBarVue from '../../components/TitleBar.vue';
	export default {
		data() {
			return {
				title: '设置推广页',
				IsShow: null,
				DicTop: null,
				userInfo: {},
				Loading: false,
				ExposureDex: 0,
				PayMethods: '支付宝',
				PayList: [
					{
						id: 3,
						icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241115141319.png',
						name: '支付宝',
						desc: '推荐',
						value: 'Alipay',
						checked: true
					},
					{
						id: 2,
						icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/Pay-Wechat.png',
						name: '微信',
						desc: '',
						value: 'Wechat',
						checked: false
					},
					{
						id: 1,
						icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%20554.png',
						name: '嗒币',
						desc: '',
						value: 'DaBi',
						checked: false
					}
				]
			}
		},
		components:{TitleBarVue},
		onLoad(option) {
			// this.userInfo = JSON.parse(option.data)
			 try {
			        this.userInfo = JSON.parse(decodeURIComponent(option.data));
			    } catch (error) {
			        console.error("解析数据失败：", error);
			        this.userInfo = {}; // 设置默认值
			    }
			this.Loading = true
			// console.log(this.userInfo);
			this.$nextTick(() => {
				let element = "#title";
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					this.DicTop = res[0].top+res[0].height
				});
			})
		},
		methods: {
			changeExposureDex(dex) {
				this.ExposureDex = dex
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			OpenpurchasePopup(item) {
				this.$refs.purchasePopup.open('bottom')
				this.PayList.forEach((i, index) => {
					if(i.name === this.PayMethods) {
						this.PayList[index].checked = true
					} else {
						this.PayList[index].checked = false
					}
				});
			},
			PopupStatusChange(e) {
				// 关闭弹窗将支付选项恢复默认
				if(!e.show) {
					setTimeout(() => {
						this.PayList.forEach((i, index) => {
							if(index === 0) {
								this.PayList[index].checked = true
							} else {
								this.PayList[index].checked = false
							}
						})
					},500)
				}
			},
			ChangePayOpt(dex) {
				this.PayList[dex].checked = true;
				this.PayMethods = this.PayList[dex].name
				// 将其他选项设置为未选中
				this.PayList.forEach((i, index) => {
					if (dex !== index) {
						this.PayList[index].checked = false;
					}
				});
				this.$refs.purchasePopup.close()
			}
		},
		mounted() {
			// 判断是APP、H5还是微信小程序来控制页面样式
			// #ifdef APP-PLUS
				this.IsShow = true
			// #endif
			
			// #ifdef H5
				this.IsShow = true
			// #endif
			
			// #ifdef MP-WEIXIN
				this.IsShow = true
			// #endif
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #f5f5f5;
	overflow: hidden;
	.title {
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		padding-right: 47rpx;
		background-color: #fff;
		border-bottom: 1px solid rgba(204, 204, 204, .2);
		text {
			flex: 1;
			font-size: 32rpx;
			text-align: center;
			font-weight: normal;
		}
	}
	.currentTabSty {
		font-size: 34rpx;
		font-weight: 700;
	}
	.currentExposure {
		color: #ff1f40 !important;
		background: #ffe9ec !important;
	}
	.z-index-99 {
		z-index: 99;
	}
	.PayOptions {
		width: 680rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		.option {
			color: #231815;
			font-size: 28rpx;
		}
		.icon {
			margin-right: 26rpx;
			image {
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
}
</style>
